<template>
  <div class="cover-container w1200">
      <div
        ref="coverSwiper"
        class="cover-swiper"
        v-if="banner && banner.length"
        >
            <div class="swiper-wrapper">
                <div
                class="swiper-slide"
                v-for="item in banner"
                :key="item.id"
                >
                <nuxt-link
                :to="item.link"
                v-if="item.link && !item.link.includes('http://')"
                >
                    <div
                    class="img tc"
                    :title="item.title"
                    >
                        <img :src="item.url" :title="item.title" alt="">
                    </div>
                </nuxt-link>
                <a
                :href="item.link"
                v-else
                target="_blank"
                >
                    <div
                    class="img tc"
                    :title="item.title"
                    >
                        <img :src="item.url" :title="item.title" alt="">
                    </div>
                </a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
  </div>
</template>

<script>
export default {
    name: 'Cover',
    data () {
        return {
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                // notNextTick: true,
                // 循环
                loop: true,
                // 设定初始化时slide的索引
                initialSlide: 0,
                // freeMode: true,
                // 自动播放
                // autoplay: {
                //     delay: 3000,
                //     stopOnLastSlide: false,
                //     disableOnInteraction: false
                // },
                autoplay: 4000,
                paginationClickable: true,
                autoplayDisableOnInteraction: false,
                // 滑动速度
                // speed: 1000,
                // 滑动方向
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                // 分页器设置
                pagination: '.swiper-pagination',
                // slidesPerView: 2,
                centeredSlides: true,
                // spaceBetween: -60,
                observer: true, // 修改swiper自己或子元素时，自动初始化swiper
                observeParents: true // 修改swiper的父元素时，自动初始化swiper
            }
        }
    },
    computed: {
        banner ({ app, store }) {
            const { banner } = this.$store.state.websiteConfig
            return banner
        }
    },
    mounted () {
        this.$nextTick(() => {
            new window.Swiper('.cover-swiper', this.swiperOption)
        })
    }
}
</script>

<style lang="less">
.cover-container {
    padding-top: 100px;
    filter: invert(1) hue-rotate(180deg);
}
.cover-swiper {
    // width: auto;
    height: 480px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    .img {
        height: 100%;
        img {
            filter: invert(1) hue-rotate(180deg);
            height: 100%;
        }
    }
    .swiper-container {
        height: 100%;
    }
    .swiper-slide {
        width: 100%;
        transform: scale(0.9);
        filter: brightness(0.5);
        transition: all 0.5s;
        border-radius: 5px;
        overflow: hidden;
    }
    .swiper-slide-active {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        z-index: 999;
        box-shadow: 0 0 5px @c-ccc;
        filter: brightness(1);
        border-radius: 5px;
        overflow: hidden;
    }
    .swiper-pagination-bullet {
        width: 20px;
        height: 4px;
        border-radius: 2px;
    }
    .swiper-pagination-bullet-active {
        background-color: @primary;
    }
}
</style>
